<!-- 全局指标概览及快速定位控件 -->
<template>
  <div class="sitemap-container">
    <div class="title">
      <span class="icon icon-biaoti"></span>
      <span>{{ title }}</span>
    </div>
    <div class="content">
      <van-collapse v-model="activeName">
        <van-collapse-item v-for="(item, index) in data" :key="index" :title="item.title" :name="index" :border="false">
          <div slot="right-icon" class="righttag">{{ activeName.includes(index) ? '- 收起' : '+ 展开' }}</div>
          <template v-if="item.subtargets">
            <div class="tips">
              <span class="icon icon-cechoutishuoming"></span>
              <span class="line-block">点击</span>
              <!-- <span class="line-block btn">按钮</span> -->
              <span class="icon icon-anniutuli"></span>
              <span class="line-block">可跳转到对应的内容</span>
            </div>
            <div
              v-for="(sub, i) in item.subtargets"
              :key="i"
              class="sub-item"
              @click="handleClick(index, sub.targetId)"
            >
              <div class="sub-title">{{ sub.subtitle }}</div>
              <div class="sub-item-content">
                <div v-for="(t, j) in sub.targets" :key="j">
                  <svg-icon icon="indexDian" class="indexDian"></svg-icon>
                  {{ t }}
                </div>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="building">功能建设中...</div>
          </template>
        </van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: [0, 1],
      title: '长航经营指标体系全景',
      data: [
        {
          title: '预算考核',
          subtargets: [
            {
              subtitle: '核心指标',
              targets: ['保费收入增长率', '新业务价值增长率', '净利润', '营运利润增长率'],
              targetId: 'target_hxzb'
            },
            {
              subtitle: '过程指标',
              targets: [
                '三年投资收益率',
                '三年滚动净值增长率',
                '当年投资收益率',
                '月均绩优人力增长率',
                '累计13率',
                '寿销产保费收入',
                '产销寿新保保费'
              ],
              targetId: 'target_gczb'
            }
          ]
        },
        {
          title: '个险业务',
          subtargets: [
            {
              subtitle: '新业务价值',
              targets: ['新业务价值'],
              targetId: 'target_xywjz'
            },
            {
              subtitle: '保费收入',
              targets: ['标准保费', '保费收入', '新保保费', '续期保费'],
              targetId: 'target_bfsr'
            },
            {
              subtitle: '业务品质',
              targets: ['新业务价值率', '13月继续率', '25月继续率', '37月继续率'],
              targetId: 'target_ywpz'
            }
          ]
        },
        {
          title: '个险队伍',
          subtargets: [
            {
              subtitle: '总人力',
              targets: ['总人力'],
              targetId: 'target_zrl'
            },
            {
              subtitle: '人力KPI',
              targets: ['健康人力', '绩优人力', '月均人力', '长险举绩人力', '总主管人力'],
              targetId: 'target_rlkpi'
            },
            {
              subtitle: '人力质量',
              targets: ['人均NBV', '人均标准保费', '人均FYC', '新人产能', '新人活动率', '13月留存率', '25月留存率'],
              targetId: 'target_rlzl'
            }
          ]
        },
        { title: '团政业务' },
        { title: '银保业务' },
        { title: '运营科技' },
        { title: '共享后援' },
        { title: '费用结构' },
        { title: '财务简报' }
      ]
    }
  },

  computed: {},

  mounted() {},

  methods: {
    handleClick(index, id) {
      this.$emit('navigateto', index, id)
    }
  }
}
</script>
<style lang="scss" scoped>
$bordercolor: #ededed22;
$fc: #e9e9ed;
.tips {
  font-size: 12px;
  margin-top: 14px;
  color: #ababab;
  display: flex;
  align-items: center;
  span {
    font-size: 12px;
    margin-right: 6px;
    &.icon {
      font-size: 14px;
    }
  }
}
.circle {
  width: 12px;
  height: 12px;
  border: 1px solid $fc;
  border-radius: 50%;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
}
.line-block {
  display: inline-block;
}
.sitemap-container {
  height: 100%;
  background-color: $main-bc;
  .title {
    font-size: 18px;
    padding: 2px 10px 0;
    font-weight: bold;
    line-height: 50px;
    height: 50px;
    span {
      margin-right: 8px;
    }
  }
  .content {
    padding: 10px 0 30px;
    font-size: 14px;
    height: calc(100% - 50px);
    overflow: auto;
    /deep/.van-collapse {
      &::after {
        border: none;
      }
      .van-collapse-item {
        .van-cell {
          color: $fc;
          font-size: 16px;
        }
        .righttag {
          font-size: 14px;
          color: $font-color;
        }
        .van-collapse-item__content {
          background-color: $main-bc;
          padding: 0 20px;
          color: $font-color;
          .sub-item {
            padding: 14px 0;
            .sub-title {
              display: inline-block;
              border: 0.6px solid $fc;
              border-radius: 4px;
              padding: 2px 20px;
              color: $fc;
            }
            &:not(:last-child) {
              border-bottom: 1px solid $bordercolor;
            }
            .sub-item-content {
              display: flex;
              flex-wrap: wrap;
              padding: 10px 0 4px 0;
              font-size: 13px;
              .indexDian {
                width: 6px;
                // height: 10px;
              }
              div {
                width: 50%;
                color: #e9e9ed;
                padding: 6px 0;
                // &::before {
                //   content: '●';
                //   font-weight: bold;
                //   margin-right: 4px;
                // }
              }
            }
          }

          .building {
            padding: 20px 0;
            color: $fc;
          }
        }
      }
      .van-collapse-item:nth-child(odd) {
        .van-cell {
          background-color: #414759;
        }
      }
      .van-collapse-item:nth-child(even) {
        .van-cell {
          background-color: $light-bc;
        }
      }
    }
  }
}
</style>
